<template>
  <div class="header">
    <div class="tit">青岛市畜牧科技示范推广服务平台</div>
    <div class="nav">
      <div class="ll">
        <div class="item" :class="$route.meta.pos == 0 ? 'on' : ''">
          <router-link to="/environmentalInfo" class="v1">环境监测</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 1 ? 'on' : ''">
          <router-link to="/monitor" class="v1">视频监控</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 2 ? 'on' : ''">
          <router-link to="/manureManagement" class="v1">粪肥管理</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 3 ? 'on' : ''">
          <router-link to="/microorganism" class="v1">微生物</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 4 ? 'on' : ''">
          <router-link to="/grainSeedMessage" class="v1">良种信息</router-link>
        </div>
      </div>
      <div class="rr">
        <div class="item" :class="$route.meta.pos == 5 ? 'on' : ''">
          <router-link to="/warning" class="v1">预警信息</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 6 ? 'on' : ''">
          <router-link to="/animalPrice" class="v1">畜产品价格</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 7 ? 'on' : ''">
          <router-link to="/technology" class="v1">技术服务</router-link>
        </div>
        <div class="item" :class="$route.meta.pos == 8 ? 'on' : ''">
          <router-link to="/primaryTechnology" class="v1">主推技术</router-link>
        </div>
      </div>
    </div>
    <div class="login">
      <!-- 未登录 -->
      <router-link to="/login" class="tt" v-if="$route.meta.login == 2">登录</router-link>
      <!-- 超级管理员登录 -->
      <router-link to="/personManagement" class="icon" v-if="$route.meta.login == 1">
        <img :src="getImageUrl('hd-iconl1.png')" alt="">
        <div class="sicon">
          <img :src="getImageUrl('hd-iconl2.png')" alt="">
        </div>
      </router-link>
      <!-- 登录 -->
      <router-link to="/personManagement" class="icon" v-else>
        <img :src="getImageUrl('hd-iconl1.png')" alt="">
      </router-link>
    </div>
    <div class="exit" v-if="$route.meta.login !== 2">
      <router-link to="/login" class="icon">
        <img :src="getImageUrl('hd-iconl3.png')" alt="">
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

</script>

<style>
</style>